<template>
  <view class="box">
    <view class="form">
      <view class="formBox">
        <view class="formItem">
          <view class="itemLeft">
            姓名
          </view>
          <u--input v-model="name" border='none' placeholder="必填,输入游客姓名">
          </u--input>
        </view>
        <view class="formItem">
          <view class="itemLeft">
            身份证
          </view>
          <u--input v-model="idCard" :placeholder="placeholderText" border='none'>
          </u--input>
        </view>
        <view class="formItem">
          <view class="itemLeft">
            手机号
          </view>
          <u--input v-model="tel" :placeholder="phoneText" border='none'>
          </u--input>
        </view>
        <view v-if="lineType == 2 || lineType == 3" class="formItem">
          <view class="itemLeft">
            家长手机号
          </view>
          <u--input v-model="parentTel" :placeholder="ParentsText" border='none'>
          </u--input>
        </view>
      </view>
    </view>
    <view class="buttomBox">
      <view class="buttom" @click="sumbit">
        提交
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      placeholderText: '输入游客身份证号',
      phoneText: '与家长手机号必填其中一个',
      ParentsText: '与手机号必填其中一个',
      Visitor: [],
      name: '',
      tel: '',
      idCard: '',
      parentTel: '',
      lineType: '',
      telNum: /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    }
  },
  onLoad(data) {
    console.log(data);
    this.lineType = data.lineType
    if (data.lineType == 3) {
      this.placeholderText = '必填,输入游客身份证号'
      this.phoneText = '输入手机号'
      this.ParentsText = '必填,请输入家长手机号'
    }

    if (data.lineType != 2 && data.lineType != 3) {
      this.phoneText = '必填,输入手机号'
    }


    console.log('添加输出', uni.getStorageSync("Visitor"));
    this.Visitor = uni.getStorageSync("Visitor")
  },
  methods: {
    sumbit() {
      if (this.name == "") {
        this.toast('请输入游客姓名');
      } else {
        if (this.lineType == 3) {
          if (this.idCard == "") {
            this.toast('请输入游客身份证号');
          } else if (!this.$filter.meetsID(this.idCard)) {
            this.toast('请输入正确游客身份证号');
          } else if (this.parentTel == "") {
            this.toast('请输入家长手机号');
          } else if (!this.telNum.test(this.parentTel)) {
            this.toast('请输入正确的家长手机号');
          } else {
            this.validateEvent()
          }
        } else {
          if (this.idCard != "") {
            if (!this.$filter.meetsID(this.idCard)) {
              this.toast('请输入正确游客身份证号');
            } else {
              this.validateEvent()
            }
          } else {
            this.validateEvent()
          }

        }
      }

    },
    validateEvent() {
      if (this.tel == "" && this.parentTel == "") {
        this.toast('请输入手机号');
      } else if (this.tel != "") {
        if (!this.telNum.test(this.tel)) {
          this.toast('请输入正常的手机号');
        } else {
          this.Visitor.push({
            name: this.name,
            tel: this.tel,
            idCard: this.idCard,
            parentTel: this.parentTel,
          })
          uni.setStorageSync("Visitor", this.Visitor);
          uni.navigateBack({
            delta: 1,
          });
        }
      } else if (this.parentTel != "") {
        if (!this.telNum.test(this.parentTel)) {
          this.toast('请输入正常的手机号');
        } else {
          this.Visitor.push({
            name: this.name,
            tel: this.tel,
            idCard: this.idCard,
            parentTel: this.parentTel,
          })
          uni.setStorageSync("Visitor", this.Visitor);
          uni.navigateBack({
            delta: 1,
          });
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100vh;
  background-color: #f2f2f2;
  font-family: PingFang SC, PingFang SC-Regular;
}

.form {
  padding-top: 40rpx;

  .formBox {
    width: 686rpx;
    background: #ffffff;
    border-radius: 10px;
    margin: auto;

    .formItem {
      padding: 18rpx 0rpx;
      margin: 0 30rpx;
      display: flex;
      border-bottom: 2rpx solid #eeeeee;
      font-size: 28rpx;

      .itemLeft {
        width: 200rpx;
      }
    }
  }
}

.buttomBox {
  width: 100%;
  height: 120rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;


  .buttom {
    width: 622rpx;
    height: 84rpx;
    background: #4186f5;
    border-radius: 42rpx;
    margin: auto;
    text-align: center;
    line-height: 84rpx;
    color: #fff;
    margin-top: 18rpx;
  }
}
</style>
